<template>
  <el-select
    v-model="newv"
    :class="className"
    :placeholder="placeholder || place"
    :value-key="valueKey"
    :clearable="isClearable"
    :disabled="isDisabled"
    multiple
    collapse-tags
    collapse-tags-tooltip
    @change="$emit('change', $event)"
  >
    <el-option
      v-for="(e, i) in options ? options : items"
      :key="i"
      :label="e.label"
      :value="e.value"
    ></el-option>
  </el-select>
</template>

<script setup>
import { ref, computed, watch } from "vue";

const props = defineProps({
  modelValue: [Array],
  className: {
    type: String,
    default: "wda-select",
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
  type: {
    type: Number,
    default: 0,
  },
  options: {
    type: Array,
    default: null,
  },
  valueKey: {
    type: String,
    default: "value",
  },
  initial: {
    type: Boolean,
    default: false,
  },
  isClearable: {
    type: Boolean,
    default: false,
  },
  isDisabled: {
    type: Boolean,
    default: false,
  },
  args: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:modelValue", "change"]);

const newv = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>
